import React from 'react';
import './orderList.less';
import { Link } from 'react-router';
import { Layout, Breadcrumb, Icon, Table, Select, DatePicker, Button, Input, Pagination, Row, Col, message, Checkbox, Modal, Timeline, Form } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';
import moment from 'moment';
import Company from '../../common/company';

const { Content, Footer, Sider, Header } = Layout;
const Search = Input.Search;
const Option = Select.Option;
const InputGroup = Input.Group;
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const config = new Config();
const token = sessionStorage.getItem('token');

class AllorderForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orderList: [], //订单列表 表格数据
            text: '', // 搜索值
            orderStatus: undefined, // 订单状态
            Kuaidi100Code: undefined, // 快递公司
            isAlreadyPay: undefined, // 支付状态
            serviceType: undefined, // 服务类型
            orderSource: undefined, // 渠道
            date: [], // 时间
            page: 1, // 当前页
            pageSize: 10, // 每页显示的条数
            total: 0, // 总数
            totalMoney: 0, // 总金额
            selectedRows: [], //选择的订单
            selectedIds: [], //选择的订单的id
            codeVisible: false, //选择快递公司对话框
            printVisible: false, //打印快递单对话框
            previewVisible: false, //预览快递单模板对话框
            printhtml: "", //打印的页面html
            shippingData: [], // 物流信息 
            shippingVisible: false // 物流模态框显示
        }
        this.searchOrder = this.searchOrder.bind(this);
        this.changePayType = this.changePayType.bind(this);
        this.changeOrderState = this.changeOrderState.bind(this);
        this.changeService = this.changeService.bind(this);
        this.changeLogistics = this.changeLogistics.bind(this);
        this.changeCMP = this.changeCMP.bind(this);
        this.changeDate = this.changeDate.bind(this);
        this.onChangePage = this.onChangePage.bind(this);
        this.syncOrder = this.syncOrder.bind(this);
    }

    componentDidMount() {
        this.getData();
    }

    // 获取数据
    getData() {
        const date = this.state.date;
        const beginDate = date[0] ? date[0].format('YYYY-MM-DD') : '';
        const endDate = date[1] ? date[1].format('YYYY-MM-DD') : '';
        $.ajax({
            url: `${config.JuseOrder}/orderList/list`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                text: this.state.text,
                isAlreadyPay: this.state.isAlreadyPay,
                orderStatus: this.state.orderStatus,
                serviceType: this.state.serviceType,
                orderSource: this.state.orderSource,
                Kuaidi100Code: this.state.kuaidi100Code,
                beginDate,
                endDate,
                page: this.state.page,
                pageSize: this.state.pageSize
            },
            success: (res) => {
                console.log('订单数据', res);
                let totalMoney = 0;
                res.data.rows.forEach((item, index) => {
                    item.key = index;
                    totalMoney += Number(item.orderMoney);
                });
                if (res.code === 200) {
                    this.setState({
                        orderList: res.data.rows,
                        total: res.data.count,
                        totalMoney,
                    });
                }
            }
        });
    }

    // 订单编号、收货人、包裹号搜索框
    searchOrder(e) {
        this.setState({
            text: e.target.value
        });
    }

    // 订单状态
    changeOrderState(value) {
        this.setState({
            orderStatus: value
        });
    }

    // 快递公司
    changeCMP(value) {
        console.log(value);
        this.setState({
            kuaidi100Code: value
        });
    }

    // 支付状态
    changePayType(value) {
        this.setState({
            isAlreadyPay: value
        });
    }

    // 服务类型
    changeService(value) {
        this.setState({
            serviceType: value
        });
    }

    // 渠道
    changeLogistics(value) {
        this.setState({
            orderSource: value
        });
    }

    // 日期
    changeDate(date, str) {
        this.setState({
            date
        });
    }

    // 查询
    filterOrders(key) {
        if (key) {
            // 搜索
            this.setState({
                page: 1
            }, () => {
                this.getData();
            });
        } else {
            this.setState({
                text: '',
                isAlreadyPay: undefined,
                orderStatus: undefined,
                serviceType: undefined,
                orderSource: undefined,
                kuaidi100Code: undefined,
                date: []
            }, () => {
                this.getData();
            });
        }
    }

    // 切换分页
    onChangePage(page) {
        this.setState({
            page,
        }, () => {
            this.getData();
        });
    }

    //选择要操作的订单
    selectOrder(text, record, e) {
        const { selectedRows, selectedIds } = this.state;
        if (e.target.checked) {
            selectedRows.push(record);
            selectedIds.push(record.orderId);
        } else {
            for (let [i, ele] of selectedRows.entries()) {
                if (record.orderId == ele.orderId) {
                    selectedRows.splice(i, 1);
                    break;
                }
            }
            for (let [i, ele] of selectedIds.entries()) {
                if (ele == record.orderId) {
                    selectedIds.splice(i, 1);
                    break;
                }
            }
        }
        this.setState({
            selectedRows,
            selectedIds,
        });
        console.log('selectedRows', selectedRows)
        console.log('selectedIds', selectedIds)
    }

    //生成快递单号
    generateBarCode() {
        const { selectedRows } = this.state;
        if (selectedRows.length == 0) {
            message.error('请先选择需要操作的订单！', 2);
            return;
        }
        this.setState({
            codeVisible: true,
        })
    }
    //确定生成快递单号
    handleGenerate() {
        const { selectedRows, selectedIds } = this.state;
        for (let ele of selectedRows) {
            if (!ele.parcelNumber) {
                Modal.warning({
                    title: '生成快递单号失败',
                    content: `订单号为${ele.orderId}的订单尚未出库生成包裹，不能生成快递单号，请取消选择！`,
                });
                return;
            } else if (ele.shipOrderNumber) {
                Modal.warning({
                    title: '生成快递单号失败',
                    content: `订单号为${ele.orderId}的订单已经有快递单号了，不能重复生成，请取消选择！`,
                });
                return;
            }
        }
        console.log(1111, 'selectedIds: ', selectedIds);
        Promise.all(selectedIds.map((orderId, i) => {  //一次只能生成一个订单的快递单号
            return Promise.resolve(
                $.ajax({
                    url: config.JuseOrder + '/orderList/setShipOrderNumber',
                    type: 'POST',
                    headers: {
                        'Authorization': 'Bearer ' + token,
                    },
                    async: true,
                    data: { orderId }
                })
            );
        })).then((data) => {
            console.log(data);
            // for (let [i, res] of data.entries()) {
            //     if (res.code == 200) {
            //         message.success(`订单号为${selectedIds[i]}的订单生成订单号成功！`, 3);
            //     } else {
            //         message.error(`订单号为${selectedIds[i]}的订单生成订单号失败，原因是：${res.mes._}`, 3);
            //     }
            // }
            this.props.form.resetFields();
            this.setState({
                codeVisible: false,
                selectedRows: [],
                selectedIds: [],
                // page: 1,
            }, () => this.getData());
        }).catch((err) => {
            console.log(err);
        })
    }
    //取消生成快递单号
    cancelGenerate() {
        this.props.form.resetFields();
        this.setState({
            codeVisible: false,
        })
    }

    //打印快递单
    printExpressBill() {
        const { selectedRows } = this.state;
        if (selectedRows.length == 0) {
            message.error('请先选择需要操作的订单！', 2);
            return;
        }
        this.setState({
            printVisible: true,
        })
    }
    //获取可以打印快递单的订单号
    getBillOrders() {
        const { selectedRows, selectedIds } = this.state;
        for (let i = 0, len = selectedRows.length; i < len; i++) {
            if (!selectedRows[i].shipOrderNumber) {
                Modal.warning({
                    title: '打印快递单失败',
                    content: `订单号为${selectedRows[i].orderId}的订单尚未生成快递单号，暂不能打印快递单，请取消选择！`,
                });
                return false;
            }
            if (i < len - 1) {
                if (selectedRows[i].Kuaidi100Code != selectedRows[i + 1].Kuaidi100Code) {
                    Modal.warning({
                        title: '打印快递单失败',
                        content: `一次只能打印同一个快递公司的快递单，请重新选择！`,
                    });
                    return false;
                }
            }
        }
        return selectedIds;
    }
    //确定打印快递单
    handlePrint() {
        const orderIds = this.getBillOrders();
        console.log('orderIds', orderIds);
        if (orderIds) {
            this.setState({
                printVisible: false,
            });
            Modal.confirm({
                title: '确认打印成功',
                content: '请确认是否已经成功打印快递单，快递单打印成功则订单会变成已发货订单！',
                okText: '打印成功',
                cancelText: '打印失败',
                onOk: () => {
                    //改变订单状态为已发货
                    const userInfo = JSON.parse(sessionStorage.getItem("UserInfo"));
                    Promise.all(orderIds.map((orderId, i) => {  //一次只能改变一个订单的订单状态
                        return Promise.resolve(
                            $.ajax({
                                url: `${config.JuseOrder}/orderList/deliverGoods`,
                                type: 'post',
                                headers: {
                                    'Authorization': 'Bearer ' + token,
                                },
                                data: {
                                    orderId,
                                    shippingPerson: userInfo.id,
                                }
                            })
                        );
                    })).then((data) => {
                        console.log(data);
                        for (let [i, res] of data.entries()) {
                            if (res.code == 200) {
                                message.success(`订单号为${orderIds[i]}的订单发货成功！`, 3);
                            } else {
                                message.error(`订单号为${orderIds[i]}的订单发货失败，原因是：${res.mes}`, 3);
                            }
                        }
                        this.setState({
                            selectedRows: [],
                            selectedIds: [],
                            page: 1,
                        }, () => this.getData())
                    }).catch((err) => {
                        console.log(err);
                    })
                },
                onCancel() {
                    console.log('打印失败')
                },
            })
            window.open(`./expressbill.html#/shunfeng/print/${orderIds.toString()}/0`);
        }
    }
    //预览快递单模板
    handlePreview() {
        const orderIds = this.getBillOrders();
        if (orderIds) {
            window.open(`./expressbill.html#/shunfeng/preview/${orderIds.toString()}/0`);
        }
    }
    //取消打印快递单
    cancelPrint() {
        this.setState({
            printVisible: false,
        })
    }

    // 同步时空出库信息
    syncOrder() {
        $.ajax({
            url: `${config.JuseOrder}/orderList/syncOrder`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
            },
            success: (data) => {
                console.log('同步时空出库信息', data);
                if (data.code === 200) {
                    this.getData();
                }
            }
        });
    }

    // 显示物流
    showShipping(shippingData) {
        this.setState({
            shippingData,
            shippingVisible: true
        });
    }

    // 隐藏物流模态框
    hiddenShipping() {
        this.setState({
            shippingData: [],
            shippingVisible: false
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 18 }, };
        //快递公司
        const companyOptions = Company.map((ele, i) => {
            return <Option key={ele.Kuaidi100Code} value={ele.Kuaidi100Code}>{ele.name}</Option>
        })
        //订单列表表头
        //dataIndex 为table的数据
        //render 为传入数据后渲染的函数 需要渲染成什么样可以自定义
        const tableTitle = [{
            width: '4%',
            title: '勾选',
            dataIndex: '',
            render: (text, record) => {
                if (record.orderStatus == 2) {
                    return <Checkbox
                        onChange={this.selectOrder.bind(this, text, record)}
                        checked={this.state.selectedIds.indexOf(record.orderId) != -1 ? true : false}
                    />
                }
            }
        },
        { title: '订单编号', dataIndex: 'orderId', width: '10%', },
        { title: '收货人', dataIndex: 'consigneeName', width: '4%', },
        { title: '联系方式', dataIndex: 'consigneePhone', width: '7%', },
        {
            title: '订单金额', dataIndex: '', width: '6%', render: (record) => {
                return <div>
                    <p>{record.orderMoney}</p>
                    <p>{record.paymentMethod}</p>
                </div>
            }
        },
        {
            title: '支付状态', width: '6%', dataIndex: '', render: (record) => {
                if (![7, 8, 9].includes(record.orderStatus)) {
                    return record.isAlreadyPay ? '已支付' : '待买家付款'
                }
            }
        },
        {
            title: '订单状态', width: '6%', dataIndex: '', render: (record) => {
                let text;
                if (record.isPrescription && !record.isSendSK) {
                    text = '待核单';
                } else {
                    switch (record.orderStatus) {
                        case 1:
                            text = '待买家付款';
                            break;
                        case 2:
                            text = '待发货';
                            break;
                        case 3:
                            text = '已发货';
                            break;
                        case 5:
                            text = '已收货';
                            break;
                        case 6:
                        case 7:
                        case 8:
                        case 9:
                            text = '交易关闭';
                            break;
                        case 10:
                            text = '拒收';
                            break;
                    }
                }
                return text;
            }
        },
        {
            title: '服务类型', width: '6%', dataIndex: '', render: (record) => {
                if (record.orderStatus === 7) {
                    return '取消订单'
                }
            }
        },
        {
            title: '处理结果', width: '6%', dataIndex: '', render: (record) => {
                if (record.orderStatus === 7) {
                    return '审核通过'
                }
            }
        },
        {
            title: '下单时间', width: '6%', dataIndex: '', render: (record) => {
                return moment(Number(record.orderDate)).format('YYYY-MM-DD')
            }
        },
        { title: '渠道', width: '6%', dataIndex: 'orderSource' },
        {
            title: '查看', dataIndex: '', width: '6%', render: (record) => {
                return <Link to={'/orderDetail/' + record.orderId}>订单详情</Link>
            }
        },
        { title: '包裹号', width: '6%', dataIndex: 'parcelNumber', },
        {
            title: '快递公司', width: '6%', dataIndex: '', render: (record) => {
                let text;
                for (let ele of Company) {
                    if (record.Kuaidi100Code == ele.Kuaidi100Code) {
                        text = ele.name;
                        return text;
                    }
                }
            }
        },
        { title: '快递单号', width: '10%', dataIndex: 'shipOrderNumber', },
        {
            title: '物流状态', width: '5%', dataIndex: '', render: (record) => {
                if (record.shippingState === '3') {
                    return <div>
                        <p><a href='javascript:void(0)' onClick={this.showShipping.bind(this, record.shippingData)}>物流跟踪</a></p>
                        <p>已签收</p>
                    </div>
                } else if (record.shippingData) {
                    return <div>
                        <p><a href='javascript:void(0)' onClick={this.showShipping.bind(this, record.shippingData)}>物流跟踪</a></p>
                    </div>
                }
            }
        },
        ];
        return (
            <Form layout="vertical">
                <div className='contentBox clearfix'>
                    <div className='orderList'>
                        <div className='breadcrumb'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>订单管理</Breadcrumb.Item>
                                <Breadcrumb.Item>订单列表</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='member-content-Search clearfix' style={{ marginBottom: 0 }}>
                            <div className='orderfilter-z'>
                                <div className='addetd addetd-z' style={{ zIndex: 1 }}>
                                    <Input addonBefore="请输入订单编号、收货人、包裹号" placeholder="请输入" value={this.state.text} onChange={this.searchOrder} />
                                </div>
                                <div className='addetd addetd-a addetd-kk'>
                                    <InputGroup compact>
                                        <span className='chengge-a'>订单状态</span>
                                        <Select placeholder='请选择' value={this.state.orderStatus} onChange={this.changeOrderState} allowClear style={{ width: 120, marginLeft: 20 }}>
                                            <Option value='1'>已取消</Option>
                                            <Option value='2'>代客取消订单</Option>
                                            <Option value='3'>等待买家付款</Option>
                                            <Option value='4'>待发货</Option>
                                            <Option value='5'>时空已出库</Option>
                                            <Option value='6'>已发货</Option>
                                            <Option value='7'>已收货</Option>
                                            <Option value='8'>拒收</Option>
                                            <Option value='9'>已完成</Option>
                                            <Option value='10'>待核单</Option>
                                        </Select>
                                    </InputGroup>
                                </div>
                                <div className='addetd addetd-a addetd-kk'>
                                    <InputGroup compact>
                                        <span className='chengge-a'>快递公司</span>
                                        <Select placeholder='请选择' value={this.state.kuaidi100Code} onChange={this.changeCMP} allowClear style={{ width: 120, marginLeft: 20 }}>
                                            {companyOptions}
                                        </Select>
                                    </InputGroup>
                                </div>
                                <div className='addetd addetd-a addetd-kk'>
                                    <InputGroup compact>
                                        <span className='chengge-a'>支付状态</span>
                                        <Select placeholder='请选择' value={this.state.isAlreadyPay} onChange={this.changePayType} allowClear style={{ width: 120, marginLeft: 20 }}>
                                            <Option value='1'>已支付</Option>
                                            <Option value='0'>等待买家付款</Option>
                                        </Select>
                                    </InputGroup>
                                </div>
                            </div>
                            <div className='orderfilter-z'>
                                <div className='addetd addetd-a addetd-kk'>
                                    <InputGroup compact>
                                        <span className='chengge-a'>服务类型</span>
                                        <Select placeholder='请选择' value={this.state.serviceType} onChange={this.changeService} allowClear style={{ width: 120, marginLeft: 20 }} >
                                            <Option value='代客取消订单'>代客取消订单</Option>
                                            <Option value='代客拒收'>代客拒收</Option>
                                        </Select>
                                    </InputGroup>
                                </div>
                                <div className='addetd addetd-a addetd-kk'>
                                    <InputGroup compact>
                                        <span className='chengge-a'>渠道</span>
                                        <Select placeholder='请选择' value={this.state.orderSource} onChange={this.changeLogistics} allowClear style={{ width: 120, marginLeft: 20 }}>
                                            <Option value='pc端'>pc端</Option>
                                            <Option value='webapp'>webapp</Option>
                                            <Option value='小程序'>小程序</Option>
                                        </Select>
                                    </InputGroup>
                                </div>
                                <div className='chengge-d'>
                                    <RangePicker
                                        placeholder={['请选择日期', '请选择日期']}
                                        onChange={this.changeDate}
                                        format='YYYY-MM-DD'
                                        value={this.state.date}
                                    />
                                </div>
                                <Button type='primary' className='member-button' icon="search" onClick={this.filterOrders.bind(this, 1)} style={{ marginLeft: 20, zIndex: 1, position: 'relative' }}>搜索</Button>
                                <Button type='primary' className='member-button' icon="reload" onClick={this.filterOrders.bind(this, 0)} style={{ zIndex: 1, position: 'relative' }}>重置</Button>
                            </div>
                            <div className='chengge-e'>
                                <Button className='member-button-aa' type='primary' style={{ marginLeft: 20 }} onClick={() => this.generateBarCode()}>生成快递号</Button>
                                <Button className='member-button-aa' type='primary' onClick={() => this.printExpressBill()}>打印快递单</Button>

                                {/* <Button className='member-button-aa' type='primary' style={{ marginLeft: 20 }}>生成快递号</Button>
                                <Button className='member-button-aa' type='primary'>打印快递单</Button> */}
                                <Button className='member-button-aa' style={{ width: 130 }} type='primary' onClick={this.syncOrder}>同步时空出库信息</Button>
                                <i className='chengge-e-a'>所查询订单合计金额：<em>{this.state.totalMoney.toFixed(2)}</em> 元</i>
                            </div>
                            <div className='allgoods-table clearfix chengge-f'>
                                <Table
                                    rowKey="orderId"
                                    columns={tableTitle}
                                    dataSource={this.state.orderList}
                                    pagination={false}
                                    bordered
                                />
                            </div>
                            <div className='goods-label-let'>
                                <div className="floor-ppagi">
                                    {
                                        this.state.total == 0 ?
                                            <p className="floor-ppagip">
                                                共{this.state.total}条记录
                                    </p> :
                                            <p className="floor-ppagip">
                                                当前显示
                                        {this.state.pageSize * (this.state.page - 1) + 1}—
                                        {this.state.pageSize * this.state.page < this.state.total ? this.state.pageSize * this.state.page : this.state.total}条记录，
                                        共{this.state.total}条记录
                                    </p>
                                    }
                                    <Pagination current={this.state.page} total={this.state.total || 1} defaultPageSize={this.state.pageSize} onChange={this.onChangePage.bind(this)} />
                                </div>
                            </div>
                            {/* 选择快递公司生成快递单号 */}
                            {/* <Modal
                                visible={this.state.codeVisible}
                                onOk={this.handleGenerate.bind(this)}
                                onCancel={this.cancelGenerate.bind(this)}
                                maskClosable={false}
                            >                                       
                                <span className="szma">选择快递公司：</span>
                                <Select value={this.state.expressCompany} onChange={(value) => this.selectCompany(value)} style={{ width: "200px" }}>
                                    <Option value="顺丰速运">顺丰速运</Option>
                                    {companyOptions}
                                </Select>
                            </Modal> */}

                            <Modal
                                className="express-modal"
                                title="选择快递方式"
                                visible={this.state.codeVisible}
                                okText="确定"
                                onOk={this.handleGenerate.bind(this)}
                                onCancel={this.cancelGenerate.bind(this)}
                                maskClosable={false}
                            >
                                <FormItem {...formItemLayout} label="快递公司" style={{ minHeight: '50px', marginBottom: 0 }}>
                                    {getFieldDecorator('company', {
                                        initialValue: "shunfeng",
                                    })(
                                        <Select style={{ width: "200px" }}>
                                            {companyOptions}
                                        </Select>
                                    )}
                                </FormItem>
                                <FormItem {...formItemLayout} label="业务类型" style={{ minHeight: '50px', marginBottom: 0 }}>
                                    {getFieldDecorator('businessType', {
                                        initialValue: "tehui",
                                    })(
                                        <Select style={{ width: "200px" }}>
                                            <Option value="tehui">顺丰特惠</Option>
                                            {/* <Option value="geri">顺丰隔日</Option>
                                            <Option value="dianshangtehui">电商特惠</Option>
                                            <Option value="dianshangzhuanpei">电商专配</Option>
                                            <Option value="yuncanggeri">云仓专配隔日</Option> */}
                                        </Select>
                                    )}
                                </FormItem>
                                <FormItem {...formItemLayout} label="付款方式" style={{ minHeight: '50px', marginBottom: 0 }}>
                                    {getFieldDecorator('payMethod', {
                                        initialValue: "yuejie",
                                    })(
                                        <Select style={{ width: "200px" }}>
                                            <Option value="yuejie">寄付月结</Option>
                                            {/* <Option value="daofu">到付</Option>
                                            <Option value="disanfang">转第三方付</Option> */}
                                        </Select>
                                    )}
                                </FormItem>
                                <FormItem {...formItemLayout} label="月结卡号" style={{ minHeight: '50px', marginBottom: 0 }}>
                                    {getFieldDecorator('cardNum1', {
                                        initialValue: "7312006116",
                                    })(
                                        <Select style={{ width: "200px" }}>
                                            <Option value="7312006116">7312006116</Option>
                                        </Select>
                                    )}
                                </FormItem>
                                <FormItem {...formItemLayout} label="代收货款卡号" style={{ minHeight: '50px', marginBottom: 0 }}>
                                    {getFieldDecorator('cardNum2', {
                                        initialValue: "7312006116",
                                    })(
                                        <Select style={{ width: "200px" }}>
                                            <Option value="7312006116">7312006116</Option>
                                        </Select>
                                    )}
                                </FormItem>
                                <FormItem {...formItemLayout} label="是否加急" style={{ minHeight: '50px', marginBottom: 0 }}>
                                    {getFieldDecorator('quickly', {
                                        initialValue: "0",
                                    })(
                                        <Select style={{ width: "200px" }}>
                                            <Option value="0">否</Option>
                                            {/* <Option value="1">是</Option>*/}
                                        </Select>
                                    )}
                                </FormItem>
                            </Modal>

                            {/* 打印快递单 */}
                            <Modal
                                visible={this.state.printVisible}
                                onCancel={this.cancelPrint.bind(this)}
                                footer={null}
                                maskClosable={false}
                            >
                                <p className='showp'>是否现在打印该{this.state.selectedRows.length}条快递单</p>
                                <p className='showp-a'>
                                    <Button type="primary" onClick={this.cancelPrint.bind(this)} className='member-button member-button-a' style={{ color: '#536a7f', backgroundColor: '#fff' }}> 取 消</Button>
                                    <Button type="primary" onClick={this.handlePreview.bind(this)} className='member-button member-button-a'>预览模板</Button>
                                    <Button type="primary" onClick={this.handlePrint.bind(this)} className='member-button member-button-a'>确定打印</Button>
                                </p>
                            </Modal>
                            <Modal
                                title='物流信息'
                                visible={this.state.shippingVisible}
                                onCancel={this.hiddenShipping.bind(this)}
                                footer={null}
                                maskClosable={false}
                            >
                                <div style={{ height: '600px', overflowY: 'auto' }}>
                                    <Timeline className="oddt-wltl">
                                        {
                                            this.state.shippingData.map((item, index) => {
                                                return <Timeline.Item key={index}>
                                                    <p>{moment(item.ftime).format('YYYY-MM-DD HH:mm:ss')}</p>
                                                    <p>{item.context}</p>
                                                </Timeline.Item>
                                            })
                                        }
                                    </Timeline>
                                </div>
                            </Modal>
                        </div>
                    </div>
                </div >
            </Form>
        )
    }
}

const Allorder = Form.create()(AllorderForm);
export default Allorder;

